<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>异烟酸生产收率预测模型应用实施方案</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <style>
        body {
            background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            color: #232d23;
            margin: 0;
            padding: 0;
            font-size: 14px;
        }
        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px 20px 240px;
        }
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 200px;
            height: 100vh;
            background: linear-gradient(135deg, #1b5e20 0%, #388e3c 100%);
            border-right: none;
            box-shadow: 2px 0 12px rgba(34, 49, 34, 0.08);
            z-index: 100;
            padding-top: 20px;
            overflow-y: auto;
        }
        .sidebar-title {
            font-size: 1.1em;
            font-weight: bold;
            color: #c8e6c9;
            margin-bottom: 15px;
            text-align: center;
            letter-spacing: 1px;
        }
        .sidebar-nav {
            list-style: none;
            padding: 0 0 20px 0;
            margin: 0;
        }
        .sidebar-nav-item {
            margin-bottom: 4px;
        }
        .sidebar-nav-link {
            display: flex;
            align-items: center;
            padding: 8px 15px;
            color: #e8f5e9;
            text-decoration: none;
            border-radius: 5px;
            transition: background 0.2s, color 0.2s;
            font-size: 0.95em;
        }
        .sidebar-nav-link:hover, .sidebar-nav-link.active {
            background: linear-gradient(90deg, #66bb6a 0%, #a5d6a7 100%);
            color: #1b5e20;
        }
        .sidebar-icon {
            margin-right: 8px;
            font-size: 1em;
            width: 20px;
            text-align: center;
        }
        .sidebar-submenu {
            list-style: none;
            padding-left: 25px;
            margin: 0;
        }
        .sidebar-submenu-link {
            display: block;
            padding: 6px 0 6px 0;
            color: #b9f6ca;
            text-decoration: none;
            font-size: 0.92em;
            border-radius: 4px;
            transition: background 0.2s, color 0.2s;
        }
        .sidebar-submenu-link:hover, .sidebar-submenu-link.active {
            background: #a5d6a7;
            color: #1b5e20;
        }
        .main-content {
            margin-left: 0;
            background: #f9fff9;
            border-radius: 10px;
            box-shadow: 0 3px 12px rgba(56, 142, 60, 0.08);
            padding: 25px 30px 30px 30px;
            min-height: 90vh;
        }
        .main-content h1 {
            font-size: 1.8em;
            margin-top: 0;
            margin-bottom: 20px;
        }
        .main-content h2 {
            font-size: 1.5em;
            margin-top: 30px;
            margin-bottom: 15px;
            color: #2e7d32;
        }
        .main-content h3 {
            font-size: 1.25em;
            margin-top: 25px;
            margin-bottom: 12px;
            color: #388e3c;
        }
        .main-content h4 {
            font-size: 1.1em;
            margin-top: 20px;
            margin-bottom: 10px;
            color: #43a047;
        }
        .main-content p, .main-content li {
            line-height: 1.6;
            margin-bottom: 12px;
        }
        .highlight {
            background: #e0f2f1;
            border-left: 4px solid #43a047;
            padding: 15px 18px;
            border-radius: 6px;
            margin-bottom: 20px;
        }
        .workflow, .timeline, .stage-progress {
            margin-bottom: 25px;
        }
        .workflow .step, .timeline-item, .card, .stat-card {
            background: #f1f8e9;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(56, 142, 60, 0.04);
            margin-bottom: 15px;
            padding: 15px 18px;
        }
        .workflow .step h3 {
            color: #388e3c;
            font-size: 1.05em;
            margin-top: 0;
            margin-bottom: 8px;
        }
        .card-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 20px;
        }
        .card {
            flex: 1 1 200px;
            min-width: 200px;
            max-width: 300px;
            border: 1px solid #c8e6c9;
        }
        .card-icon {
            font-size: 1.8em;
            color: #43a047;
            margin-bottom: 8px;
        }
        .stat-card {
            display: inline-block;
            width: 160px;
            margin-right: 12px;
            vertical-align: top;
        }
        .stat-label {
            color: #888;
            font-size: 0.92em;
        }
        .stat-value {
            font-size: 1.4em;
            font-weight: bold;
            color: #43a047;
        }
        .stat-trend {
            font-size: 0.9em;
            color: #388e3c;
        }
        .trend-up { color: #388e3c; }
        .trend-down { color: #e53935; }
        .visualization-title {
            font-weight: bold;
            color: #388e3c;
            margin-bottom: 8px;
        }
        .code-block {
            background: #f4f8fb;
            border-radius: 6px;
            padding: 10px 14px;
            margin: 14px 0;
            font-family: 'Fira Mono', 'Consolas', monospace;
            font-size: 0.92em;
            overflow-x: auto;
        }
        .dashboard-container, .parameters-card, .optimization-card, .alerts-panel {
            background: #f1f8e9;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(56, 142, 60, 0.04);
            margin-bottom: 15px;
            padding: 15px 18px;
        }
        .dashboard-container .header {
            border-bottom: 1px solid #c8e6c9;
            margin-bottom: 14px;
            padding-bottom: 6px;
        }
        .dashboard-container .main-content {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }
        .yield-prediction-card, .parameters-card, .optimization-card {
            flex: 1 1 280px;
            min-width: 260px;
            margin-bottom: 0;
        }
        .alerts-panel {
            margin-top: 15px;
        }
        .alert-item {
            padding: 6px 0;
            border-bottom: 1px solid #c8e6c9;
        }
        .alert-item:last-child {
            border-bottom: none;
        }
        .alert-item.warning { color: #fbc02d; }
        .alert-item.info { color: #43a047; }
        .apply-btn {
            background: linear-gradient(90deg, #43a047 0%, #a5d6a7 100%);
            color: #fff;
            border: none;
            border-radius: 5px;
            padding: 7px 18px;
            font-size: 0.95em;
            margin-top: 8px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .apply-btn:hover {
            background: linear-gradient(90deg, #388e3c 0%, #81c784 100%);
        }
        .feature-impact {
            margin: 18px 0;
        }
        .feature-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .feature-name {
            width: 40%;
            font-size: 0.9em;
        }
        .feature-bar-container {
            width: 45%;
            height: 10px;
            background: #e8f5e9;
            border-radius: 5px;
            margin: 0 8px;
        }
        .feature-bar {
            height: 100%;
            border-radius: 5px;
            background: linear-gradient(90deg, #66bb6a, #388e3c);
        }
        .feature-value {
            width: 10%;
            font-size: 0.9em;
            font-weight: bold;
            color: #388e3c;
            text-align: right;
        }
        .case-study {
            background: #f1f8e9;
            border-radius: 8px;
            padding: 16px;
            margin: 18px 0;
            border-left: 4px solid #388e3c;
        }
        .tech-stack {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin: 18px 0;
        }
        .tech-item {
            background: #e8f5e9;
            border: 1px solid #c8e6c9;
            border-radius: 5px;
            padding: 8px 12px;
            display: flex;
            align-items: center;
            font-size: 0.9em;
        }
        .tech-icon {
            margin-right: 6px;
            color: #388e3c;
        }
        .implementation-steps {
            counter-reset: step-counter;
            margin: 18px 0;
        }
        .implementation-step {
            counter-increment: step-counter;
            margin-bottom: 12px;
            padding-left: 36px;
            position: relative;
        }
        .implementation-step:before {
            content: counter(step-counter);
            position: absolute;
            left: 0;
            top: 0;
            background: #388e3c;
            color: white;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 0.9em;
        }
        .implementation-title {
            font-weight: bold;
            margin-bottom: 4px;
            color: #388e3c;
        }
        .code-tabs {
            margin: 18px 0;
        }
        .tab-header {
            display: flex;
            border-bottom: 1px solid #c8e6c9;
        }
        .tab-btn {
            padding: 8px 16px;
            background: #f9fff9;
            border: 1px solid #c8e6c9;
            border-bottom: none;
            border-radius: 5px 5px 0 0;
            margin-right: 4px;
            cursor: pointer;
            font-size: 0.9em;
        }
        .tab-btn.active {
            background: #e8f5e9;
            font-weight: bold;
        }
        .tab-content {
            border: 1px solid #c8e6c9;
            border-top: none;
            padding: 12px;
            background: #f9fff9;
            border-radius: 0 0 5px 5px;
        }
        .prediction-value {
            margin: 12px 0;
        }
        .chart {
            margin: 20px 0;
        }
        .chart img {
            max-width: 100%;
            height: auto;
            border-radius: 6px;
        }
        .conclusion {
            background: #e8f5e9;
            border-radius: 8px;
            padding: 16px;
            margin: 25px 0;
            box-shadow: 0 2px 6px rgba(56, 142, 60, 0.06);
        }
        .back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            background: #43a047;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            transition: background 0.3s;
        }
        .back-to-top:hover {
            background: #388e3c;
        }
        .progress-bar {
            width: 100%;
            height: 8px;
            background: #e8f5e9;
            border-radius: 4px;
            margin: 6px 0;
            overflow: hidden;
        }
        .progress {
            height: 100%;
            background: linear-gradient(90deg, #66bb6a, #388e3c);
            border-radius: 4px;
        }
        .slider-container {
            width: 120px;
            height: 6px;
            background: #e8f5e9;
            border-radius: 3px;
            margin: 0 10px;
            position: relative;
        }
        .slider-track {
            width: 100%;
            height: 100%;
            position: relative;
        }
        .slider-fill {
            height: 100%;
            background: linear-gradient(90deg, #66bb6a, #388e3c);
            border-radius: 3px;
        }
        .slider-thumb {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #388e3c;
            position: absolute;
            top: -3px;
            transform: translateX(-50%);
        }
        .recommendation-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid #e8f5e9;
        }
        .recommendation-item:last-child {
            border-bottom: none;
        }
        .normal-temp, .normal-carbon {
            color: #66bb6a;
        }
        .batch-info {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            font-size: 0.9em;
            color: #666;
        }
        .note {
            font-size: 0.85em;
            color: #666;
            margin-top: 10px;
        }
        @media (max-width: 900px) {
            .container { padding-left: 0; }
            .sidebar { position: static; width: 100%; height: auto; border-right: none; box-shadow: none; padding-top: 0; }
        }
    </style>
</head>
<body>
    <aside class="sidebar">
        <div class="sidebar-title">目录导航</div>
        <ul class="sidebar-nav">
            <li class="sidebar-nav-item"><a class="sidebar-nav-link" href="#section-0"><span class="sidebar-icon"><i class="fas fa-bullseye"></i></span>模型应用价值与落地路径</a></li>
            <li class="sidebar-nav-item"><a class="sidebar-nav-link" href="#section-1"><span class="sidebar-icon"><i class="fas fa-sitemap"></i></span>系统架构设计</a></li>
            <li class="sidebar-nav-item"><a class="sidebar-nav-link" href="#section-2"><span class="sidebar-icon"><i class="fas fa-database"></i></span>数据流设计</a></li>
            <li class="sidebar-nav-item"><a class="sidebar-nav-link" href="#section-3"><span class="sidebar-icon"><i class="fas fa-cogs"></i></span>模型部署与应用</a></li>
            <li class="sidebar-nav-item"><a class="sidebar-nav-link" href="#section-4"><span class="sidebar-icon"><i class="fas fa-desktop"></i></span>用户界面设计</a></li>
            <li class="sidebar-nav-item"><a class="sidebar-nav-link" href="#section-5"><span class="sidebar-icon"><i class="fas fa-link"></i></span>系统集成方案</a></li>
            <li class="sidebar-nav-item"><a class="sidebar-nav-link" href="#section-7"><span class="sidebar-icon"><i class="fas fa-chart-line"></i></span>成本收益分析</a></li>
            <li class="sidebar-nav-item"><a class="sidebar-nav-link" href="#section-7"><span class="sidebar-icon"><i class="fas fa-lightbulb"></i></span>结论与建议</a></li>
            <li class="sidebar-nav-item"><a class="sidebar-nav-link" href="#section-8"><span class="sidebar-icon"><i class="fas fa-industry"></i></span>冶金行业应用案例</a></li>
        </ul>
    </aside>
    <div class="container">
        <div class="main-content">
            <h1>异烟酸生产收率预测模型应用实施方案</h1>
            
            <div class="highlight">
                <p><strong>应用概述：</strong>本文档详细阐述了如何将异烟酸生产收率预测模型有机地应用到实际工业生产环境中，包括系统架构设计、数据流设计、模型部署策略、用户界面开发以及与现有MES/ERP系统的集成方案，旨在为企业提供一个可落地的智能制造解决方案。</p>
            </div>
            
            <h2 id="section-0">1. 模型应用价值与落地路径</h2>
            <p>与传统软件开发项目不同，数据科学项目从模型训练到实际落地应用需要跨越"最后一公里"，将实验室中的预测模型转化为能够创造实际业务价值的生产系统。</p>
            
            <h3>1.1 模型应用价值分析</h3>
            <p>异烟酸生产收率预测模型在实际应用中可以创造以下价值：</p>
            <ul>
                <li><strong>提高生产收率</strong>：预测收率提高1%，年产1000吨的企业可增加利润约50-100万元</li>
                <li><strong>降低生产成本</strong>：减少原材料浪费，优化工艺参数，降低能源消耗</li>
                <li><strong>提高产品质量</strong>：稳定的收率往往对应着稳定的产品质量</li>
                <li><strong>缩短生产周期</strong>：通过参数优化，减少不必要的生产时间</li>
                <li><strong>提升决策效率</strong>：为生产决策提供数据支持，减少人为决策偏差</li>
            </ul>
            
            <h3>1.2 落地路径规划</h3>
            <p>将异烟酸收率预测模型应用到实际生产中，需要按照以下路径进行规划：</p>
            
            <div class="workflow">
                <div class="step">
                    <h3>第一阶段：离线决策支持系统</h3>
                    <p>构建基于Excel或Web的简易决策支持工具，操作人员可输入工艺参数，获取预测收率，用于生产参数调整参考。</p>
                </div>
                <div class="step">
                    <h3>第二阶段：半自动化预测系统</h3>
                    <p>与生产数据采集系统集成，自动获取历史和实时数据，提供生产过程中的收率预测和参数优化建议。</p>
                </div>
                <div class="step">
                    <h3>第三阶段：智能生产控制系统</h3>
                    <p>基于模型预测结果，实现工艺参数的自动调整和控制，构建闭环反馈的智能生产系统。</p>
                </div>
            </div>
            
            <div class="chart">
                <img src="images/1.png" alt="异烟酸生产收率预测模型应用路径图">
                <p style="text-align: center;"><em>图1：异烟酸生产收率预测模型应用路径示意图</em></p>
            </div>
            
            <h2 id="section-1">2. 系统架构设计</h2>
            <p>为了实现模型的有效应用，需要设计一套完整的系统架构，包括数据层、模型层、应用层和用户界面层。</p>
            
            <h3>2.1 整体架构</h3>
            <p>异烟酸收率预测应用系统采用分层架构设计，主要包括以下几个层次：</p>
            <ul>
                <li><strong>数据层</strong>：负责数据采集、存储、清洗和预处理</li>
                <li><strong>模型层</strong>：包含训练好的XGBoost模型和相关的特征工程处理模块</li>
                <li><strong>应用层</strong>：提供预测服务、参数优化、异常检测等功能</li>
                <li><strong>展示层</strong>：用户界面和可视化展示</li>
                <li><strong>集成层</strong>：与现有生产系统的集成接口</li>
            </ul>
            
            <div class="chart">
                <img src="images/system_architecture.svg" alt="异烟酸收率预测系统架构图">
                <p style="text-align: center;"><em>图1：异烟酸收率预测系统架构图</em></p>
            </div>
            
            <h3>2.2 技术选型</h3>
            <p>根据工业环境的特点和需求，我们推荐以下技术栈：</p>
            <ul>
                <li><strong>数据采集与存储</strong>：
                    <ul>
                        <li>数据采集：OPC UA/MQTT协议，工业网关设备</li>
                        <li>数据存储：TimescaleDB（时序数据）+ PostgreSQL（关系数据）</li>
                        <li>数据湖：MinIO（对象存储，存储原始数据）</li>
                    </ul>
                </li>
                <li><strong>模型部署</strong>：
                    <ul>
                        <li>容器化部署：Docker + Kubernetes</li>
                        <li>模型服务：Flask/FastAPI + ONNX Runtime</li>
                        <li>模型版本管理：MLflow</li>
                    </ul>
                </li>
                <li><strong>应用服务</strong>：
                    <ul>
                        <li>后端服务：Spring Boot/Django</li>
                        <li>消息队列：Kafka/RabbitMQ</li>
                        <li>缓存：Redis</li>
                    </ul>
                </li>
                <li><strong>前端界面</strong>：
                    <ul>
                        <li>Web前端：Vue.js/React + ECharts</li>
                        <li>移动端：Flutter/React Native</li>
                        <li>大屏展示：Grafana/自定义大屏</li>
                    </ul>
                </li>
            </ul>
            
            <h3>2.3 硬件要求</h3>
            <p>异烟酸收率预测系统的部署需要以下硬件支持：</p>
            <ul>
                <li><strong>数据采集设备</strong>：温度、压力、pH值等传感器，工业级网关</li>
                <li><strong>边缘计算设备</strong>：工业PC或边缘服务器（用于数据预处理）</li>
                <li><strong>服务器</strong>：应用服务器和数据库服务器</li>
                <li><strong>网络设备</strong>：工业级交换机、路由器等</li>
                <li><strong>终端设备</strong>：操作员工作站、平板电脑、大屏幕等</li>
            </ul>
            
            <h2 id="section-2">3. 数据流设计</h2>
            <p>收率预测模型的有效运行依赖于完整的数据流设计，包括数据采集、传输、处理和存储。</p>
            
            <div class="visualization">
                <img src="images/data_flow.svg" alt="异烟酸收率预测系统数据流程图">
                <p style="text-align: center;"><em>图2：异烟酸收率预测系统数据流程图</em></p>
            </div>

            <h3>3.1 数据采集方案</h3>
            <p>异烟酸生产过程中的数据来源主要包括：</p>
            <ul>
                <li><strong>自动化仪表数据</strong>：通过DCS系统采集的温度、压力、流量等实时数据</li>
                <li><strong>实验室数据</strong>：pH值、含量分析等实验室检测数据</li>
                <li><strong>操作记录</strong>：操作员记录的操作时间、参数调整等数据</li>
                <li><strong>生产批次数据</strong>：原料批号、生产批次号等批次管理数据</li>
                <li><strong>质量数据</strong>：最终产品质量检测数据</li>
            </ul>
            
            <div class="stats-container">
                <div class="stat-card">
                    <div class="stat-label">实时数据采集点</div>
                    <div class="stat-value">128</div>
                    <div class="stat-trend trend-up">↑12% 较上年</div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">采样频率</div>
                    <div class="stat-value">10s</div>
                    <div class="stat-trend">实时监控</div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">日均数据量</div>
                    <div class="stat-value">8.6GB</div>
                    <div class="stat-trend trend-up">↑24% 较上年</div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">数据准确率</div>
                    <div class="stat-value">99.7%</div>
                    <div class="stat-trend trend-up">↑1.2% 较上年</div>
                </div>
            </div>
            
            <p>针对不同类型的数据，采用不同的采集策略：</p>
            <ul>
                <li><strong>实时数据</strong>：通过OPC UA协议从DCS系统直接采集，采样频率10-30秒/次</li>
                <li><strong>实验室数据</strong>：通过实验室信息管理系统(LIMS)接口获取，或通过Web表单手动录入</li>
                <li><strong>批次数据</strong>：通过与MES系统集成获取</li>
            </ul>
            
            <div class="visualization">
                <div class="visualization-title">数据采集系统架构</div>
                <img src="../data-architecture.png" alt="数据采集系统架构图" onerror="this.onerror=null; this.src='data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'800\' height=\'400\' viewBox=\'0 0 800 400\'><rect width=\'800\' height=\'400\' fill=\'%23f8fafc\'></rect><rect x=\'50\' y=\'50\' width=\'700\' height=\'80\' rx=\'5\' fill=\'%233498db\' opacity=\'0.8\'></rect><text x=\'400\' y=\'95\' text-anchor=\'middle\' fill=\'white\' font-family=\'Arial\' font-size=\'18\' font-weight=\'bold\'>数据源层</text><rect x=\'50\' y=\'160\' width=\'700\' height=\'80\' rx=\'5\' fill=\'%232ecc71\' opacity=\'0.8\'></rect><text x=\'400\' y=\'205\' text-anchor=\'middle\' fill=\'white\' font-family=\'Arial\' font-size=\'18\' font-weight=\'bold\'>数据采集层</text><rect x=\'50\' y=\'270\' width=\'700\' height=\'80\' rx=\'5\' fill=\'%239b59b6\' opacity=\'0.8\'></rect><text x=\'400\' y=\'315\' text-anchor=\'middle\' fill=\'white\' font-family=\'Arial\' font-size=\'18\' font-weight=\'bold\'>数据存储层</text><rect x=\'100\' y=\'60\' width=\'100\' height=\'60\' rx=\'5\' fill=\'white\'></rect><text x=\'150\' y=\'95\' text-anchor=\'middle\' fill=\'%233498db\' font-family=\'Arial\' font-size=\'12\'>DCS系统</text><rect x=\'250\' y=\'60\' width=\'100\' height=\'60\' rx=\'5\' fill=\'white\'></rect><text x=\'300\' y=\'95\' text-anchor=\'middle\' fill=\'%233498db\' font-family=\'Arial\' font-size=\'12\'>LIMS系统</text><rect x=\'400\' y=\'60\' width=\'100\' height=\'60\' rx=\'5\' fill=\'white\'></rect><text x=\'450\' y=\'95\' text-anchor=\'middle\' fill=\'%233498db\' font-family=\'Arial\' font-size=\'12\'>MES系统</text><rect x=\'550\' y=\'60\' width=\'100\' height=\'60\' rx=\'5\' fill=\'white\'></rect><text x=\'600\' y=\'95\' text-anchor=\'middle\' fill=\'%233498db\' font-family=\'Arial\' font-size=\'12\'>手动录入</text><rect x=\'100\' y=\'170\' width=\'150\' height=\'60\' rx=\'5\' fill=\'white\'></rect><text x=\'175\' y=\'205\' text-anchor=\'middle\' fill=\'%232ecc71\' font-family=\'Arial\' font-size=\'12\'>OPC UA连接器</text><rect x=\'325\' y=\'170\' width=\'150\' height=\'60\' rx=\'5\' fill=\'white\'></rect><text x=\'400\' y=\'205\' text-anchor=\'middle\' fill=\'%232ecc71\' font-family=\'Arial\' font-size=\'12\'>API集成服务</text><rect x=\'550\' y=\'170\' width=\'150\' height=\'60\' rx=\'5\' fill=\'white\'></rect><text x=\'625\' y=\'205\' text-anchor=\'middle\' fill=\'%232ecc71\' font-family=\'Arial\' font-size=\'12\'>ETL处理服务</text><rect x=\'100\' y=\'280\' width=\'180\' height=\'60\' rx=\'5\' fill=\'white\'></rect><text x=\'190\' y=\'315\' text-anchor=\'middle\' fill=\'%239b59b6\' font-family=\'Arial\' font-size=\'12\'>时序数据库(TimescaleDB)</text><rect x=\'325\' y=\'280\' width=\'180\' height=\'60\' rx=\'5\' fill=\'white\'></rect><text x=\'415\' y=\'315\' text-anchor=\'middle\' fill=\'%239b59b6\' font-family=\'Arial\' font-size=\'12\'>关系数据库(PostgreSQL)</text><rect x=\'550\' y=\'280\' width=\'180\' height=\'60\' rx=\'5\' fill=\'white\'></rect><text x=\'640\' y=\'315\' text-anchor=\'middle\' fill=\'%239b59b6\' font-family=\'Arial\' font-size=\'12\'>数据湖(MinIO)</text><path d=\'M150,120 L150,170\' stroke=\'%23333\' stroke-width=\'2\' fill=\'none\' marker-end=\'url(%23arrowhead)\'></path><path d=\'M300,120 L300,170\' stroke=\'%23333\' stroke-width=\'2\' fill=\'none\' marker-end=\'url(%23arrowhead)\'></path><path d=\'M450,120 L450,170\' stroke=\'%23333\' stroke-width=\'2\' fill=\'none\' marker-end=\'url(%23arrowhead)\'></path><path d=\'M600,120 L600,170\' stroke=\'%23333\' stroke-width=\'2\' fill=\'none\' marker-end=\'url(%23arrowhead)\'></path><path d=\'M175,230 L175,280\' stroke=\'%23333\' stroke-width=\'2\' fill=\'none\' marker-end=\'url(%23arrowhead)\'></path><path d=\'M400,230 L400,280\' stroke=\'%23333\' stroke-width=\'2\' fill=\'none\' marker-end=\'url(%23arrowhead)\'></path><path d=\'M625,230 L625,280\' stroke=\'%23333\' stroke-width=\'2\' fill=\'none\' marker-end=\'url(%23arrowhead)\'></path><defs><marker id=\'arrowhead\' markerWidth=\'10\' markerHeight=\'7\' refX=\'9\' refY=\'3.5\' orient=\'auto\'><polygon points=\'0 0, 10 3.5, 0 7\' fill=\'%23333\'/></marker></defs></svg>'">
            </div>

            <h3>3.2 数据预处理流程</h3>
            <p>原始数据需要经过以下处理流程才能用于模型预测：</p>
            
            <div class="workflow">
                <div class="step">
                    <h3>1. 数据清洗</h3>
                    <p>处理缺失值、异常值和格式不一致问题，与模型训练时使用的清洗方法保持一致。</p>
                </div>
                <div class="step">
                    <h3>2. 特征计算</h3>
                    <p>基于原始数据计算模型所需的特征，如时间间隔特征、比例特征等。</p>
                </div>
                <div class="step">
                    <h3>3. 特征标准化</h3>
                    <p>将特征数据按照训练集的统计特性进行标准化处理。</p>
                </div>
                <div class="step">
                    <h3>4. 数据校验</h3>
                    <p>检查处理后的数据是否满足模型输入要求，包括数据类型、取值范围等。</p>
                </div>
            </div>

            <div class="visualization">
                <div class="visualization-title">模型特征重要性分析</div>
                <div class="feature-impact">
                    <div class="feature-item">
                        <div class="feature-name">物料配比 (4-氰基吡啶/氢氧化钠)</div>
                        <div class="feature-bar-container">
                            <div class="feature-bar" style="width: 85%"></div>
                        </div>
                        <div class="feature-value">28.5%</div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-name">反应时间 (A11-A5)</div>
                        <div class="feature-bar-container">
                            <div class="feature-bar" style="width: 65%"></div>
                        </div>
                        <div class="feature-value">21.3%</div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-name">pH值 (A22)</div>
                        <div class="feature-bar-container">
                            <div class="feature-bar" style="width: 45%"></div>
                        </div>
                        <div class="feature-value">15.7%</div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-name">水用量 (A4+A19)</div>
                        <div class="feature-bar-container">
                            <div class="feature-bar" style="width: 36%"></div>
                        </div>
                        <div class="feature-value">12.2%</div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-name">反应温度 (A6)</div>
                        <div class="feature-bar-container">
                            <div class="feature-bar" style="width: 27%"></div>
                        </div>
                        <div class="feature-value">9.4%</div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-name">其他参数</div>
                        <div class="feature-bar-container">
                            <div class="feature-bar" style="width: 12%"></div>
                        </div>
                        <div class="feature-value">12.9%</div>
                    </div>
                </div>
            </div>
            
            <h3>3.3 数据存储设计</h3>
            <p>系统采用多层次的数据存储策略：</p>
            <ul>
                <li><strong>实时数据库</strong>：存储最近7-30天的高频采样数据，用于实时监控和短期分析</li>
                <li><strong>历史数据库</strong>：存储经过降采样的长期历史数据，用于趋势分析和模型重训练</li>
                <li><strong>批次数据库</strong>：以生产批次为单位存储的综合数据，用于批次分析和质量追溯</li>
                <li><strong>模型数据库</strong>：存储模型预测结果、参数优化建议等模型输出数据</li>
            </ul>
            
            <div class="code-block">
    ```sql
    -- 实时数据表结构示例
    CREATE TABLE real_time_data (
        id SERIAL PRIMARY KEY,
        timestamp TIMESTAMPTZ NOT NULL,
        batch_id VARCHAR(50) NOT NULL,
        parameter_id VARCHAR(50) NOT NULL,
        value FLOAT NOT NULL,
        quality INTEGER NOT NULL,  -- 数据质量标志
        UNIQUE(timestamp, batch_id, parameter_id)
    );

    -- 批次数据表结构示例
    CREATE TABLE batch_data (
        batch_id VARCHAR(50) PRIMARY KEY,
        start_time TIMESTAMPTZ NOT NULL,
        end_time TIMESTAMPTZ,
        material_a1 FLOAT NOT NULL,  -- A1参数值
        material_a3 FLOAT NOT NULL,  -- A3参数值
        -- 其他批次参数
        predicted_yield FLOAT,       -- 预测收率
        actual_yield FLOAT,          -- 实际收率
        optimization_applied BOOLEAN DEFAULT FALSE,  -- 是否应用了优化建议
        notes TEXT
    );

    -- 特征数据表结构示例
    CREATE TABLE feature_data (
        id SERIAL PRIMARY KEY,
        batch_id VARCHAR(50) NOT NULL,
        timestamp TIMESTAMPTZ NOT NULL,
        feature_name VARCHAR(100) NOT NULL,
        feature_value FLOAT NOT NULL,
        UNIQUE(batch_id, timestamp, feature_name)
    );
    ```
            </div>
        </div>
        
        <h2 id="section-3">4. 模型部署与应用</h2>
        <p>将训练好的异烟酸收率预测模型部署到生产环境是实现模型价值的关键步骤，需要考虑模型服务化、版本管理、性能优化等多方面因素。</p>
        
        <h3>4.1 模型服务化方案</h3>
        <p>我们采用微服务架构将模型封装为独立的预测服务：</p>
        <ul>
            <li><strong>模型导出</strong>：将训练好的XGBoost模型导出为标准格式（ONNX/PMML）</li>
            <li><strong>API设计</strong>：设计RESTful API接口，包含预测、批量预测、模型信息查询等功能</li>
            <li><strong>服务部署</strong>：将模型服务部署为Docker容器，方便水平扩展和版本控制</li>
            <li><strong>负载均衡</strong>：通过Kubernetes实现服务的高可用和负载均衡</li>
        </ul>
        
        <div class="code-block">
    ```python
    # 模型服务API示例（使用FastAPI）
    from fastapi import FastAPI, HTTPException
    from pydantic import BaseModel
    import numpy as np
    import onnxruntime as rt
    from typing import List, Dict, Optional
    import pandas as pd
    import json

    app = FastAPI(title="异烟酸收率预测服务",
                  description="提供异烟酸生产过程收率预测API")

    # 加载模型
    model_path = "models/xgboost_model.onnx"
    sess = rt.InferenceSession(model_path)

    # 特征处理函数
    def preprocess_features(data):
        # 特征处理逻辑，与模型训练时保持一致
        # ...
        return processed_data

    # 请求数据模型
    class PredictionRequest(BaseModel):
        batch_id: str
        parameters: Dict[str, float]
        timestamp: Optional[str] = None

    # 批量请求数据模型
    class BatchPredictionRequest(BaseModel):
        predictions: List[PredictionRequest]

    # 单条预测接口
    @app.post("/predict", tags=["预测"])
    async def predict(request: PredictionRequest):
        try:
            # 特征预处理
            features = preprocess_features(request.parameters)
            
            # 模型预测
            input_name = sess.get_inputs()[0].name
            pred_onx = sess.run(None, {input_name: features.astype(np.float32)})[0]
            
            # 构建响应
            return {
                "batch_id": request.batch_id,
                "predicted_yield": float(pred_onx[0]),
                "timestamp": request.timestamp,
                "model_version": "1.0.0"
            }
        except Exception as e:
            raise HTTPException(status_code=500, detail=str(e))

    # 批量预测接口
    @app.post("/batch-predict", tags=["预测"])
    async def batch_predict(request: BatchPredictionRequest):
        results = []
        for pred_req in request.predictions:
            result = await predict(pred_req)
            results.append(result)
        return results

    # 模型信息接口
    @app.get("/model-info", tags=["模型"])
    async def model_info():
        return {
            "model_name": "XGBoost异烟酸收率预测模型",
            "model_version": "1.0.0",
            "creation_date": "2023-05-15",
            "input_features": ["A1", "A3", "A4", "A5_minutes", ...],
            "output_feature": "收率",
            "metrics": {
                "mse": 0.000129,
                "rmse": 0.011358,
                "mae": 0.009124
            }
        }

    # 服务健康检查接口
    @app.get("/health", tags=["系统"])
    async def health_check():
        return {"status": "healthy"}
    ```
        </div>
        
        <h3>4.2 模型版本管理</h3>
        <p>为确保模型可维护性和可追溯性，我们建立完整的模型版本管理体系：</p>
        <ul>
            <li><strong>模型注册中心</strong>：使用MLflow管理模型元数据、版本和部署状态</li>
            <li><strong>版本策略</strong>：采用语义化版本号(Semantic Versioning)管理模型版本</li>
            <li><strong>A/B测试</strong>：支持新老模型的并行部署和对比测试</li>
            <li><strong>回滚机制</strong>：当新模型表现不佳时，能够快速回滚到上一版本</li>
            <li><strong>审计日志</strong>：记录模型的所有变更和使用情况，用于合规审计</li>
        </ul>
        
        <h3>4.3 模型应用场景</h3>
        <p>异烟酸收率预测模型可以应用于以下多个生产场景：</p>
        
        <div class="workflow">
            <div class="step">
                <h3>生产前参数优化</h3>
                <p>在生产开始前，根据当前原料和设备状况，预测不同参数组合的收率，推荐最优参数组合。</p>
            </div>
            <div class="step">
                <h3>生产中实时预测</h3>
                <p>在生产过程中，实时采集参数数据，预测最终收率，及早发现潜在问题并进行调整。</p>
            </div>
            <div class="step">
                <h3>异常工况预警</h3>
                <p>检测参数异常或预测收率异常下降的情况，及时发出预警，避免生产事故。</p>
            </div>
            <div class="step">
                <h3>生产后分析</h3>
                <p>生产完成后，分析实际收率与预测收率的差异，找出影响因素，持续优化生产工艺。</p>
            </div>
        </div>
        
        <h3>4.4 决策支持系统</h3>
        <p>基于预测模型，我们构建了一套完整的决策支持系统，帮助操作人员和管理人员做出更好的决策：</p>
        <ul>
            <li><strong>参数优化建议</strong>：根据预测模型，推荐最优参数组合</li>
            <li><strong>敏感性分析</strong>：分析不同参数变化对收率的影响程度</li>
            <li><strong>质量风险评估</strong>：评估当前参数下的质量风险</li>
            <li><strong>成本收益分析</strong>：分析不同参数调整的成本收益比</li>
        </ul>
        
        <div class="chart">
            <img src="images/data_flow.svg" alt="异烟酸生产收率预测决策支持系统示意图">
            <p style="text-align: center;"><em>图3：异烟酸生产收率预测决策支持系统示意图</em></p>
        </div>
        
        <h2 id="section-4">5. 用户界面设计</h2>
        <p>良好的用户界面是确保模型应用系统被用户接受和有效使用的关键。我们根据不同用户群体的需求，设计了多层次的用户界面。</p>
        
        <h3>5.1 用户角色分析</h3>
        <p>系统主要面向以下用户角色：</p>
        <ul>
            <li><strong>操作员</strong>：负责日常生产操作的一线工人，需要简单直观的操作界面</li>
            <li><strong>工艺工程师</strong>：负责工艺优化的技术人员，需要详细的参数分析工具</li>
            <li><strong>质量管理人员</strong>：关注产品质量的专业人员，需要质量相关的分析功能</li>
            <li><strong>生产管理者</strong>：关注生产效率和成本的管理者，需要综合分析和决策支持</li>
            <li><strong>系统管理员</strong>：维护系统的IT人员，需要系统监控和配置界面</li>
        </ul>
        
        <h3>5.2 界面功能设计</h3>
        <p>根据不同用户角色的需求，我们设计了以下功能模块：</p>
        
        <div class="workflow">
            <div class="step">
                <h3>生产监控看板</h3>
                <p>显示当前生产状态、关键参数和预测收率，支持参数历史趋势查看和预警显示。</p>
            </div>
            <div class="step">
                <h3>参数优化工具</h3>
                <p>提供参数调整界面，实时显示调整后的预测收率，支持多方案比较和敏感性分析。</p>
            </div>
            <div class="step">
                <h3>批次分析报表</h3>
                <p>按批次查看生产数据、预测结果和实际收率，支持多维度分析和对比。</p>
            </div>
            <div class="step">
                <h3>系统管理控制台</h3>
                <p>管理用户权限、系统配置、模型版本，监控系统运行状态。</p>
            </div>
        </div>
        
        <h3>5.3 界面原型</h3>
        <p>以下是系统主要界面的原型设计：</p>
        
        <h4>5.3.1 生产监控看板</h4>
        <div class="code-block">
    ```html
    <!-- 生产监控看板HTML结构示例 -->
    <div class="dashboard-container">
        <div class="header">
            <h1>异烟酸生产监控看板</h1>
            <div class="batch-info">
                <span>当前批次: B202306150001</span>
                <span>开始时间: 2023-06-15 08:30:00</span>
                <span>状态: 生产中</span>
            </div>
        </div>
        
        <div class="main-content">
            <div class="yield-prediction-card">
                <h2>收率预测</h2>
                <div class="prediction-value">
                    <span class="value">94.2%</span>
                    <span class="trend positive">↑0.5%</span>
                </div>
                <div class="confidence-interval">
                    置信区间: 93.8% - 94.6%
                </div>
                <div class="historical-chart">
                    <!-- 预测趋势图 -->
                </div>
            </div>
            
            <div class="parameters-card">
                <h2>关键参数监控</h2>
                <div class="parameter-list">
                    <div class="parameter-item">
                        <span class="name">A1 (4-氰基吡啶用量)</span>
                        <span class="value">300 kg</span>
                        <span class="status normal">正常</span>
                    </div>
                    <div class="parameter-item">
                        <span class="name">A3 (氢氧化钠用量)</span>
                        <span class="value">405 kg</span>
                        <span class="status normal">正常</span>
                    </div>
                    <div class="parameter-item">
                        <span class="name">A6 (反应温度)</span>
                        <span class="value">85 ℃</span>
                        <span class="status warning">偏高</span>
                    </div>
                    <div class="parameter-item">
                        <span class="name">A22 (pH值)</span>
                        <span class="value">7.2</span>
                        <span class="status normal">正常</span>
                    </div>
                    <!-- 更多参数 -->
                </div>
            </div>
            
            <div class="optimization-card">
                <h2>参数优化建议</h2>
                <div class="recommendation">
                    <div class="recommendation-item">
                        <span class="parameter">A6 (反应温度)</span>
                        <span class="current">85 ℃</span>
                        <span class="arrow">→</span>
                        <span class="recommended">82 ℃</span>
                        <span class="impact">预计收率+0.3%</span>
                    </div>
                    <div class="recommendation-item">
                        <span class="parameter">A11-A5 (反应时间)</span>
                        <span class="current">120 分钟</span>
                        <span class="arrow">→</span>
                        <span class="recommended">135 分钟</span>
                        <span class="impact">预计收率+0.2%</span>
                    </div>
                    <!-- 更多建议 -->
                </div>
                <button class="apply-btn">应用建议</button>
            </div>
        </div>
        
        <div class="alerts-panel">
            <h2>预警信息</h2>
            <div class="alert-list">
                <div class="alert-item warning">
                    <span class="time">10:15:30</span>
                    <span class="message">A6温度超过推荐上限，建议降低至82℃</span>
                    <span class="status">未处理</span>
                </div>
                <div class="alert-item info">
                    <span class="time">09:45:12</span>
                    <span class="message">A22 pH值趋势下降，请注意监控</span>
                    <span class="status">已确认</span>
                </div>
                <!-- 更多预警 -->
            </div>
        </div>
    </div>
    ```
        </div>
        
        <h4>5.3.2 参数优化工具</h4>
        <p>参数优化工具允许工艺工程师通过调整不同参数，查看预测收率的变化，从而找到最优参数组合。界面采用交互式设计，用户可以通过滑块或输入框调整参数值，系统实时计算并显示预测收率。</p>
        
        <h4>5.3.3 批次分析报表</h4>
        <p>批次分析报表提供历史批次的详细分析，包括预测收率与实际收率的对比、关键参数分布、异常批次分析等。用户可以通过多维度筛选和分组，深入分析影响收率的关键因素。</p>
        
        <h3>5.4 移动端应用</h3>
        <p>为了方便生产人员随时查看和操作，我们开发了移动端应用，主要功能包括：</p>
        <ul>
            <li><strong>生产状态查看</strong>：实时查看当前生产状态和预测收率</li>
            <li><strong>预警推送</strong>：接收参数异常或收率预测异常的推送通知</li>
            <li><strong>简易操作</strong>：支持简单的参数调整和确认操作</li>
            <li><strong>巡检记录</strong>：支持现场巡检数据的录入和上传</li>
        </ul>
        
        <h3>5.5 特征影响力可视化</h3>
        <div class="visualization">
            <div class="visualization-title">主要特征对收率的影响关系</div>
            <img src="images/feature_importance.svg" alt="异烟酸收率预测模型特征重要性" style="width:100%; max-width:800px;">
            <p style="text-align: center;"><em>图4：异烟酸收率预测模型特征重要性分析图</em></p>
        </div>

        <!-- 添加模型评估结果图 -->
        <h3>5.6 模型性能评估</h3>
        <div class="visualization">
            <div class="visualization-title">模型在不同数据集上的性能</div>
            <img src="images/model_evaluation.svg" alt="异烟酸收率预测模型评估结果" style="width:100%; max-width:800px;">
            <p style="text-align: center;"><em>图5：异烟酸收率预测模型在不同数据集上的性能评估</em></p>
        </div>
        
        <h2 id="section-5">6. 系统集成方案</h2>
        <p>异烟酸收率预测系统需要与企业现有的多个系统进行集成，以实现数据共享和业务协同。</p>
        
        <h3>6.1 与MES系统集成</h3>
        <p>MES(制造执行系统)是企业生产管理的核心系统，收率预测系统与MES的集成主要包括：</p>
        <ul>
            <li><strong>生产计划对接</strong>：从MES获取生产计划信息，为预测做准备</li>
            <li><strong>批次数据同步</strong>：与MES同步批次管理数据，确保数据一致性</li>
            <li><strong>工艺参数交互</strong>：将优化后的工艺参数推送给MES执行</li>
            <li><strong>质量数据共享</strong>：与MES共享质量相关数据和预测结果</li>
        </ul>
        
        <div class="code-block">
    ```json
    // MES集成接口示例 - 批次信息接口
    {
        "api_version": "1.0",
        "endpoint": "/api/mes/batch",
        "method": "GET",
        "parameters": {
            "batch_id": "string, 批次ID",
            "start_date": "string, 开始日期(可选)",
            "end_date": "string, 结束日期(可选)",
            "status": "string, 批次状态(可选)"
        },
        "response": {
            "total": "integer, 总记录数",
            "batches": [
                {
                    "batch_id": "string, 批次ID",
                    "product_code": "string, 产品代码",
                    "start_time": "datetime, 开始时间",
                    "end_time": "datetime, 结束时间",
                    "status": "string, 批次状态",
                    "parameters": {
                        "A1": "number, 4-氰基吡啶用量",
                        "A3": "number, 氢氧化钠用量",
                        // 其他参数
                    },
                    "actual_yield": "number, 实际收率(如有)"
                }
                // 更多批次
            ]
        }
    }

    // MES集成接口示例 - 推送优化参数接口
    {
        "api_version": "1.0",
        "endpoint": "/api/mes/optimize-parameters",
        "method": "POST",
        "request_body": {
            "batch_id": "string, 批次ID",
            "timestamp": "datetime, 时间戳",
            "optimized_parameters": {
                "A6": "number, 优化后的温度",
                "A11": "number, 优化后的时间",
                // 其他参数
            },
            "predicted_yield": "number, 预测收率",
            "confidence_interval": ["number, 下限", "number, 上限"],
            "model_version": "string, 模型版本"
        },
        "response": {
            "status": "string, 处理状态",
            "message": "string, 处理消息",
            "transaction_id": "string, 事务ID"
        }
    }
    ```
        </div>
        
        <h3>6.2 与DCS系统集成</h3>
        <p>DCS(分布式控制系统)是生产过程控制的核心系统，收率预测系统与DCS的集成主要包括：</p>
        <ul>
            <li><strong>实时数据采集</strong>：从DCS系统采集温度、压力等实时数据</li>
            <li><strong>控制参数下发</strong>：将优化后的控制参数下发给DCS执行</li>
            <li><strong>报警联动</strong>：与DCS报警系统联动，实现异常预警</li>
        </ul>
        
        <p>集成方式主要包括：</p>
        <ul>
            <li><strong>OPC UA接口</strong>：通过OPC UA标准接口与DCS系统进行数据交换</li>
            <li><strong>历史数据接口</strong>：通过历史数据接口获取DCS的历史数据</li>
            <li><strong>自定义API</strong>：针对特定DCS系统开发自定义接口</li>
        </ul>
        
        <h3>6.3 与ERP系统集成</h3>
        <p>ERP(企业资源计划)系统是企业管理的核心系统，收率预测系统与ERP的集成主要包括：</p>
        <ul>
            <li><strong>物料管理</strong>：与ERP的物料管理模块集成，获取原材料信息</li>
            <li><strong>成本核算</strong>：将收率预测结果用于ERP的成本核算</li>
            <li><strong>生产计划</strong>：为ERP的生产计划提供决策支持</li>
        </ul>
        
        <h3>6.4 与LIMS系统集成</h3>
        <p>LIMS(实验室信息管理系统)是管理实验室数据的专业系统，收率预测系统与LIMS的集成主要包括：</p>
        <ul>
            <li><strong>质量数据获取</strong>：获取LIMS中的质量检测数据</li>
            <li><strong>样品管理</strong>：与LIMS的样品管理模块集成</li>
            <li><strong>预测结果验证</strong>：将预测结果与LIMS的实际检测结果进行对比验证</li>
        </ul>
        
        <h2 id="section-6">7. 项目实施路径</h2>
        <p>将异烟酸收率预测模型成功应用到实际生产环境中，需要制定详细的实施路径，确保项目平稳推进并创造实际价值。</p>
        
        <div class="stage-progress">
            <div class="stage completed">
                <div class="stage-dot">1</div>
                <div class="stage-name">需求调研</div>
            </div>
            <div class="stage completed">
                <div class="stage-dot">2</div>
                <div class="stage-name">基础设施</div>
            </div>
            <div class="stage active">
                <div class="stage-dot">3</div>
                <div class="stage-name">核心功能</div>
            </div>
            <div class="stage">
                <div class="stage-dot">4</div>
                <div class="stage-name">系统集成</div>
            </div>
            <div class="stage">
                <div class="stage-dot">5</div>
                <div class="stage-name">试运行</div>
            </div>
            <div class="stage">
                <div class="stage-dot">6</div>
                <div class="stage-name">全面应用</div>
            </div>
        </div>
        
        <div class="timeline">
            <div class="timeline-item">
                <div class="timeline-content">
                    <div class="timeline-date">1-2个月</div>
                    <h4>阶段一：需求调研与规划</h4>
                    <ul>
                        <li>详细调研生产工艺和现有系统</li>
                        <li>明确用户需求和应用场景</li>
                        <li>制定详细的项目计划和技术方案</li>
                        <li>确定项目团队和责任分工</li>
                    </ul>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-content">
                    <div class="timeline-date">2-3个月</div>
                    <h4>阶段二：基础设施建设</h4>
                    <ul>
                        <li>数据采集系统部署</li>
                        <li>服务器和网络环境准备</li>
                        <li>数据库和存储系统搭建</li>
                        <li>与现有系统的接口开发</li>
                    </ul>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-content">
                    <div class="timeline-date">3-4个月</div>
                    <h4>阶段三：核心功能开发</h4>
                    <ul>
                        <li>模型服务部署和测试</li>
                        <li>数据预处理模块开发</li>
                        <li>预测和优化算法实现</li>
                        <li>核心业务逻辑开发</li>
                        <li>用户界面开发</li>
                    </ul>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-content">
                    <div class="timeline-date">2-3个月</div>
                    <h4>阶段四：系统集成与测试</h4>
                    <ul>
                        <li>与MES、DCS等系统集成</li>
                        <li>系统功能测试和性能测试</li>
                        <li>用户验收测试</li>
                        <li>问题修复和优化</li>
                    </ul>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-content">
                    <div class="timeline-date">3-6个月</div>
                    <h4>阶段五：试运行与优化</h4>
                    <ul>
                        <li>系统试运行</li>
                        <li>用户培训</li>
                        <li>运行数据收集与分析</li>
                        <li>模型优化和系统调整</li>
                        <li>收益评估和改进</li>
                    </ul>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-content">
                    <div class="timeline-date">持续进行</div>
                    <h4>阶段六：全面推广应用</h4>
                    <ul>
                        <li>系统全面上线运行</li>
                        <li>运行效果评估和持续优化</li>
                        <li>经验总结和知识沉淀</li>
                        <li>推广到其他产品线或工厂</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <h2 id="section-7">7. 成本收益分析</h2>
        <p>异烟酸收率预测系统的投资决策需要基于全面的成本收益分析。</p>
        
        <div class="visualization">
            <div class="visualization-title">投资回报分析</div>
            <div id="roi-chart" style="width: 100%; height: 300px;"></div>
        </div>
        
        <div class="card-container">
            <div class="card">
                <div class="card-icon">🖥️</div>
                <h4>硬件成本</h4>
                <ul>
                    <li>数据采集设备：20-50万元</li>
                    <li>服务器和存储设备：30-60万元</li>
                    <li>网络设备：10-20万元</li>
                    <li>终端设备：10-30万元</li>
                </ul>
                <p><strong>小计：</strong>70-160万元</p>
            </div>
            <div class="card">
                <div class="card-icon">💾</div>
                <h4>软件成本</h4>
                <ul>
                    <li>基础软件许可：15-30万元</li>
                    <li>定制开发费用：80-150万元</li>
                    <li>系统集成费用：30-60万元</li>
                </ul>
                <p><strong>小计：</strong>125-240万元</p>
            </div>
            <div class="card">
                <div class="card-icon">👥</div>
                <h4>实施成本</h4>
                <ul>
                    <li>咨询与规划：20-40万元</li>
                    <li>系统实施：50-100万元</li>
                    <li>培训费用：10-20万元</li>
                </ul>
                <p><strong>小计：</strong>80-160万元</p>
            </div>
            <div class="card">
                <div class="card-icon">🔄</div>
                <h4>运维成本(年)</h4>
                <ul>
                    <li>系统运维：20-40万元</li>
                    <li>模型优化：15-30万元</li>
                    <li>技术支持：10-20万元</li>
                </ul>
                <p><strong>小计：</strong>45-90万元/年</p>
            </div>
        </div>
        
        <p>总投资成本：初期投资约275-560万元，年运维成本约45-90万元。</p>
        
        <div class="visualization">
            <div class="visualization-title">收率提升趋势预测</div>
            <div id="yield-trend-chart" style="width: 100%; height: 400px;"></div>
        </div>
        
        <p>系统实施后预期带来的收益包括：</p>
        
        <h3>7.2 收益分析</h3>
        <p>系统实施后预期带来的收益包括：</p>
        <ul>
            <li><strong>直接经济收益</strong>：
                <ul>
                    <li>收率提升：假设年产1000吨，收率提升1%，按每吨50万元计算，年增收500万元</li>
                    <li>原材料节约：优化原料用量，年节约成本约200-300万元</li>
                    <li>能源节约：优化能源使用，年节约成本约50-100万元</li>
                    <li>废品减少：减少不合格品，年节约成本约100-200万元</li>
                </ul>
            </li>
            <li><strong>间接经济收益</strong>：
                <ul>
                    <li>生产周期缩短：提高生产效率，年增效约150-250万元</li>
                    <li>库存优化：减少安全库存，释放资金约100-200万元</li>
                    <li>质量提升：提高产品质量一致性，减少客诉和退货，年节约约50-100万元</li>
                </ul>
            </li>
            <li><strong>无形收益</strong>：
                <ul>
                    <li>技术提升：提升企业技术水平和创新能力</li>
                    <li>知识积累：沉淀生产工艺知识，减少对专家经验的依赖</li>
                    <li>品牌提升：提升企业品牌形象和市场竞争力</li>
                    <li>管理提升：提升生产管理水平和决策科学性</li>
                </ul>
            </li>
        </ul>
        <p>年度直接经济收益约850-1150万元，间接经济收益约300-550万元，总收益约1150-1700万元。</p>
        
        <h3>7.3 投资回报分析</h3>
        <p>基于上述成本和收益分析，我们可以计算出以下投资回报指标：</p>
        <ul>
            <li><strong>投资回收期</strong>：约3-6个月</li>
            <li><strong>投资回报率(ROI)</strong>：约200%-300%</li>
            <li><strong>净现值(NPV)</strong>：5年期约3000-5000万元</li>
            <li><strong>内部收益率(IRR)</strong>：约150%-200%</li>
        </ul>
        <p>从投资回报分析看，异烟酸收率预测系统具有显著的经济效益，投资回收期短，回报率高，是一个值得实施的项目。</p>
        
        <h3>7.4 风险分析</h3>
        <p>项目实施过程中可能面临的主要风险包括：</p>
        <ul>
            <li><strong>技术风险</strong>：模型性能不达预期，系统稳定性差</li>
            <li><strong>实施风险</strong>：项目进度延误，成本超支</li>
            <li><strong>运营风险</strong>：用户接受度低，使用效果不佳</li>
            <li><strong>维护风险</strong>：系统维护复杂，成本高于预期</li>
        </ul>
        <p>针对这些风险，我们制定了相应的风险管理策略，包括：</p>
        <ul>
            <li>分阶段实施，控制投资风险</li>
            <li>选择成熟技术，降低技术风险</li>
            <li>加强用户参与，提高接受度</li>
            <li>提供完善培训，确保有效使用</li>
            <li>建立长效运维机制，保障系统稳定</li>
        </ul>
        
        <h2 id="section-7">7. 结论与建议</h2>
        <p>通过对异烟酸收率预测模型应用方案的全面分析，我们得出以下结论和建议：</p>
        
        <h3>7.1 结论</h3>
        <ul>
            <li>异烟酸收率预测模型具有显著的应用价值，可有效提高生产收率、降低成本、提升质量</li>
            <li>将模型应用到实际生产环境需要完整的系统架构设计和实施路径</li>
            <li>系统实施需要考虑数据采集、模型部署、用户界面和系统集成等多个方面</li>
            <li>从投资回报角度看，项目具有较高的经济效益和短的回收期</li>
            <li>项目实施有一定风险，但通过分阶段实施和风险管理可以有效控制</li>
        </ul>
        
        <h3>7.2 建议</h3>
        <ul>
            <li><strong>分阶段实施</strong>：建议按照"离线决策支持系统→半自动化预测系统→智能生产控制系统"的路径逐步实施</li>
            <li><strong>以点带面</strong>：先在一条生产线或一个关键工序进行试点，取得成功后再推广到其他生产线或工序</li>
            <li><strong>重视数据质量</strong>：加强数据采集和预处理，确保模型输入数据的准确性和完整性</li>
            <li><strong>关注用户体验</strong>：注重用户界面设计和用户培训，提高系统使用效果</li>
            <li><strong>建立长效机制</strong>：建立模型持续优化和系统持续改进的长效机制，确保系统长期有效</li>
            <li><strong>扩展应用范围</strong>：在成功应用的基础上，逐步扩展到其他产品或工艺的预测和优化</li>
        </ul>
        
        <h3>7.3 展望</h3>
        <p>随着工业4.0和智能制造的深入发展，异烟酸收率预测系统可以进一步升级和拓展：</p>
        <ul>
            <li><strong>多模型融合</strong>：结合多种算法模型，提高预测精度和鲁棒性</li>
            <li><strong>深度学习应用</strong>：引入深度学习技术，挖掘更复杂的数据模式</li>
            <li><strong>知识图谱构建</strong>：构建异烟酸生产知识图谱，实现知识推理和决策</li>
            <li><strong>数字孪生融合</strong>：与数字孪生技术结合，实现生产过程的全面数字化模拟</li>
            <li><strong>跨产品线应用</strong>：将预测技术推广到其他化工产品，构建企业级智能生产平台</li>
        </ul>
        
        <div class="conclusion">
            <p>异烟酸收率预测模型的成功应用，不仅能为企业带来直接的经济效益，还能提升企业的技术水平和管理能力，是企业实现数字化转型和智能制造的重要一步。通过科学的规划和分步实施，企业可以稳步推进项目落地，逐步实现从传统生产向数据驱动的智能生产转变，提升企业的核心竞争力。</p>
        </div>
        
        <h2 id="section-8">8. 冶金行业应用案例</h2>
        <p>预测模型不仅可以应用于化工行业，在冶金等重工业领域同样具有广阔的应用前景。下面以钢铁生产中的转炉终点控制预测系统为例，介绍如何将类似的预测模型真实落地应用。</p>
        
        <div class="highlight">
            <p><strong>应用场景概述：</strong>钢铁冶炼过程中，转炉终点温度和成分的精确控制直接影响钢材质量和生产效率。传统依靠人工经验判断存在延迟性和不稳定性，通过建立终点预测模型，可以实现提前预测出钢温度和碳含量，为操作工提供精确的加料和时间控制建议，降低能耗，提高钢材质量稳定性。</p>
        </div>

        <h3>8.1 冶金行业预测模型实施难点</h3>
        <p>相比化工行业，冶金行业模型落地面临更多特殊挑战：</p>
        <ul>
            <li><strong>高温高压环境</strong>：传感器稳定性差，数据采集困难</li>
            <li><strong>工况复杂多变</strong>：原料成分波动大，工艺参数范围宽</li>
            <li><strong>过程强非线性</strong>：反应过程具有强非线性特征，模型难以准确描述</li>
            <li><strong>专家经验依赖</strong>：操作工长期依靠经验判断，对新系统接受度低</li>
            <li><strong>信息化基础薄弱</strong>：部分企业信息化基础不足，系统集成难度大</li>
        </ul>

        <h3>8.2 数据采集与特征工程</h3>
        <div class="workflow">
            <div class="step">
                <h3>数据来源多元化</h3>
                <p>转炉终点预测系统的数据来源主要包括：</p>
                <ul>
                    <li>一级自动化系统(L1)：炉内温度、压力、氧气流量等实时过程数据</li>
                    <li>热电偶和光谱仪：钢水温度和成分数据</li>
                    <li>原料系统：铁水成分、废钢比例、合金添加量等</li>
                    <li>出钢系统：终点实测温度、碳含量等质量数据</li>
                    <li>工艺记录：吹氧时间、加料顺序等操作记录</li>
                </ul>
            </div>
            <div class="step">
                <h3>特征工程适配冶金特性</h3>
                <p>针对冶金行业特点，特征工程需要考虑：</p>
                <ul>
                    <li><strong>时间序列特征</strong>：炉内温度上升率、废钢熔化速率等</li>
                    <li><strong>物料平衡特征</strong>：铁、碳、硅、锰等元素的平衡计算</li>
                    <li><strong>能量平衡特征</strong>：吹氧能量输入、散热损失估算</li>
                    <li><strong>反应动力学特征</strong>：碳氧反应速率、温度变化率</li>
                    <li><strong>专家经验特征</strong>：基于专家知识构建的复合特征</li>
                </ul>
            </div>
        </div>

        <div class="visualization">
            <div class="visualization-title">转炉终点预测关键特征重要性</div>
            <div class="feature-impact">
                <div class="feature-item">
                    <div class="feature-name">铁水硅含量</div>
                    <div class="feature-bar-container">
                        <div class="feature-bar" style="width: 92%"></div>
                    </div>
                    <div class="feature-value">26.8%</div>
                </div>
                <div class="feature-item">
                    <div class="feature-name">累积供氧量</div>
                    <div class="feature-bar-container">
                        <div class="feature-bar" style="width: 78%"></div>
                    </div>
                    <div class="feature-value">22.4%</div>
                </div>
                <div class="feature-item">
                    <div class="feature-name">废钢比例</div>
                    <div class="feature-bar-container">
                        <div class="feature-bar" style="width: 62%"></div>
                    </div>
                    <div class="feature-value">17.5%</div>
                </div>
                <div class="feature-item">
                    <div class="feature-name">铁水温度</div>
                    <div class="feature-bar-container">
                        <div class="feature-bar" style="width: 52%"></div>
                    </div>
                    <div class="feature-value">14.3%</div>
                </div>
                <div class="feature-item">
                    <div class="feature-name">炉气CO/CO₂比值</div>
                    <div class="feature-bar-container">
                        <div class="feature-bar" style="width: 38%"></div>
                    </div>
                    <div class="feature-value">10.6%</div>
                </div>
                <div class="feature-item">
                    <div class="feature-name">其他参数</div>
                    <div class="feature-bar-container">
                        <div class="feature-bar" style="width: 28%"></div>
                    </div>
                    <div class="feature-value">8.4%</div>
                </div>
            </div>
        </div>

        <h3>8.3 模型选择与优化</h3>
        <p>转炉终点预测采用了多模型融合策略：</p>
        <ul>
            <li><strong>物理模型</strong>：基于冶金热力学和动力学原理构建的理论模型</li>
            <li><strong>机器学习模型</strong>：基于历史数据训练的统计模型，如XGBoost、LSTM等</li>
            <li><strong>专家规则模型</strong>：编码冶金专家经验的规则模型</li>
            <li><strong>混合模型</strong>：结合物理模型与机器学习模型的优势</li>
        </ul>
        <p>模型优化策略：</p>
        <ul>
            <li>按钢种分类建模，提高预测精度</li>
            <li>定期重训练，适应设备老化和原料变化</li>
            <li>在线学习，持续优化模型参数</li>
            <li>多目标优化，同时考虑温度、成分和能耗</li>
        </ul>

        <h3>8.4 真实落地的技术架构</h3>
        <p>转炉终点预测系统的技术架构需要考虑冶金行业的特殊要求，包括高可靠性、实时性和易用性。</p>

        <div class="tech-stack">
            <div class="tech-item"><span class="tech-icon"><i class="fas fa-server"></i></span>边缘计算服务器</div>
            <div class="tech-item"><span class="tech-icon"><i class="fas fa-network-wired"></i></span>工业以太网</div>
            <div class="tech-item"><span class="tech-icon"><i class="fas fa-database"></i></span>时序数据库</div>
            <div class="tech-item"><span class="tech-icon"><i class="fas fa-microchip"></i></span>模型推理引擎</div>
            <div class="tech-item"><span class="tech-icon"><i class="fas fa-code"></i></span>WebAPI服务</div>
            <div class="tech-item"><span class="tech-icon"><i class="fas fa-desktop"></i></span>实时监控大屏</div>
            <div class="tech-item"><span class="tech-icon"><i class="fas fa-tablet-alt"></i></span>移动终端</div>
            <div class="tech-item"><span class="tech-icon"><i class="fas fa-sync"></i></span>模型管理平台</div>
        </div>

        <h4>8.4.1 前后端分离架构</h4>
        <p>系统采用了前后端分离的架构设计：</p>
        <ul>
            <li><strong>前端</strong>：基于Vue.js框架开发，采用响应式设计，支持PC和移动端访问</li>
            <li><strong>后端</strong>：采用SpringBoot框架，提供RESTful API服务</li>
            <li><strong>消息中间件</strong>：使用Kafka实现系统间的消息传递和解耦</li>
            <li><strong>时序数据库</strong>：使用TimescaleDB存储过程数据和预测结果</li>
            <li><strong>容器化部署</strong>：采用Docker+Kubernetes实现系统的容器化部署和管理</li>
        </ul>
        <p>这种架构设计使系统具有高可扩展性、高可用性和易于维护的特点。</p>
        
        <h3>8.5 真实生产环境的集成与部署</h3>
        <div class="implementation-steps">
            <div class="implementation-step">
                <div class="implementation-title">现场数据采集系统部署</div>
                <p>在转炉现场部署边缘计算服务器，通过OPC UA协议与L1/L2系统对接，采集实时数据。同时安装特殊传感器，如炉气分析仪，补充原有数据。</p>
            </div>
            <div class="implementation-step">
                <div class="implementation-title">基础数据平台构建</div>
                <p>构建包含时序数据库、关系数据库的基础数据平台，存储和管理所有生产数据，建立数据质量监控机制，确保模型输入数据的完整性。</p>
            </div>
            <div class="implementation-step">
                <div class="implementation-title">模型部署与服务化</div>
                <p>模型转换为ONNX格式并容器化部署，通过REST API提供服务，支持多实例部署和负载均衡，确保服务高可用。</p>
            </div>
            <div class="implementation-step">
                <div class="implementation-title">应用界面开发</div>
                <p>开发PC端、大屏和移动端应用，提供预测结果查看、参数优化建议、异常预警等功能，设计简洁直观的界面，降低操作工使用门槛。</p>
            </div>
            <div class="implementation-step">
                <div class="implementation-title">生产系统集成</div>
                <p>与MES、L2系统、实验室系统等集成，实现数据共享和业务协同，预测结果可选择性地用于自动控制或人工决策参考。</p>
            </div>
            <div class="implementation-step">
                <div class="implementation-title">试运行与迭代优化</div>
                <p>系统先在少量炉次上试运行，收集反馈意见，迭代优化模型和系统功能，逐步提高预测精度和用户接受度。</p>
            </div>
        </div>

        <h3>8.6 实际应用效果与经验</h3>
        <p>某大型钢铁企业实施转炉终点预测系统后，取得了显著效果：</p>
        <ul>
            <li><strong>终点温度预测精度</strong>：平均误差从±25℃降低到±12℃</li>
            <li><strong>终点碳含量预测精度</strong>：平均误差从±0.02%降低到±0.008%</li>
            <li><strong>一次成功出钢率</strong>：从87%提高到95%以上</li>
            <li><strong>合金消耗量</strong>：降低5-8%</li>
            <li><strong>能源消耗</strong>：降低3-5%</li>
        </ul>

        <h3>8.7 前端演示界面</h3>
        <p>以下是转炉终点预测系统的前端界面示例，展示了如何将复杂的模型预测结果以操作人员易于理解的方式呈现：</p>
        
        <div class="dashboard-container">
            <div class="header">
                <h1>转炉终点控制系统 - 3#转炉</h1>
                <div class="batch-info">
                    <span>当前炉次: H202306250001</span>
                    <span>开始时间: 2023-06-25 08:30:00</span>
                    <span>状态: 吹炼中</span>
                </div>
            </div>
            
            <div class="main-content">
                <div class="yield-prediction-card">
                    <h2>终点预测</h2>
                    <div class="prediction-value">
                        <span class="label">温度:</span>
                        <span class="value normal-temp">1658 ℃</span>
                        <span class="confidence">(±15℃)</span>
                    </div>
                    <div class="prediction-value">
                        <span class="label">碳含量:</span>
                        <span class="value normal-carbon">0.0482 %</span>
                        <span class="confidence">(±0.01%)</span>
                    </div>
                    <div class="prediction-value">
                        <span class="label">吹炼进度:</span>
                        <div class="progress-bar">
                            <div class="progress" style="width: 85%"></div>
                        </div>
                        <span class="value">85%</span>
                    </div>
                    <div class="prediction-value">
                        <span class="label">剩余时间:</span>
                        <span class="value">125秒</span>
                    </div>
                </div>
                
                <div class="parameters-card">
                    <h2>关键参数控制</h2>
                    <div class="parameter-list">
                        <div class="parameter-item">
                            <span class="name">氧气流量</span>
                            <div class="slider-container">
                                <div class="slider-track">
                                    <div class="slider-fill" style="width: 62%"></div>
                                    <div class="slider-thumb" style="left: 62%"></div>
                                </div>
                            </div>
                            <span class="value">10200 Nm³/h</span>
                            <span class="status normal">正常</span>
                        </div>
                        <div class="parameter-item">
                            <span class="name">氧枪高度</span>
                            <div class="slider-container">
                                <div class="slider-track">
                                    <div class="slider-fill" style="width: 45%"></div>
                                    <div class="slider-thumb" style="left: 45%"></div>
                                </div>
                            </div>
                            <span class="value">1.8 m</span>
                            <span class="status normal">正常</span>
                        </div>
                        <div class="parameter-item">
                            <span class="name">炉底氩气</span>
                            <div class="slider-container">
                                <div class="slider-track">
                                    <div class="slider-fill" style="width: 35%"></div>
                                    <div class="slider-thumb" style="left: 35%"></div>
                                </div>
                            </div>
                            <span class="value">350 Nm³/h</span>
                            <span class="status warning">偏低</span>
                        </div>
                    </div>
                    <button class="apply-btn">应用优化参数</button>
                </div>
                
                <div class="optimization-card">
                    <h2>合金添加建议</h2>
                    <div class="recommendation">
                        <div class="recommendation-item">
                            <span class="material">FeMn</span>
                            <span class="amount">120.5 kg</span>
                            <span class="effect">温度 +8℃</span>
                            <span class="status">待确认</span>
                        </div>
                        <div class="recommendation-item">
                            <span class="material">SiMn</span>
                            <span class="amount">80.2 kg</span>
                            <span class="effect">Mn +0.15%</span>
                            <span class="status">待确认</span>
                        </div>
                        <div class="recommendation-item">
                            <span class="material">Al</span>
                            <span class="amount">45.0 kg</span>
                            <span class="effect">脱氧</span>
                            <span class="status">待确认</span>
                        </div>
                    </div>
                    <div class="note">
                        <i class="el-icon-info"></i> 
                        合金添加建议基于当前预测温度和成分计算得出，请结合实际情况使用
                    </div>
                </div>
            </div>
            
            <div class="chart-container">
                <h2>历史趋势</h2>
                <div class="trend-chart" style="height: 300px; background: #f4f8fb; border-radius: 6px; margin-top: 10px;">
                    <!-- 此处在实际应用中会显示ECharts图表 -->
                    <div style="text-align: center; padding-top: 140px; color: #888;">图表区域 - 显示温度、碳含量、参数变化趋势</div>
                </div>
            </div>
        </div>

        <div class="case-study">
            <h4>关键成功因素与经验总结</h4>
            <ol>
                <li><strong>深度融合专业知识</strong>：冶金模型比纯数据驱动模型更稳定可靠，需要深度融合专业知识</li>
                <li><strong>适应现场条件</strong>：系统设计必须考虑恶劣工况、操作工习惯等现场实际情况</li>
                <li><strong>渐进式应用</strong>：从辅助决策到半自动控制再到全自动控制，逐步推进</li>
                <li><strong>持续优化机制</strong>：建立数据分析、模型优化、效果评估的闭环机制</li>
                <li><strong>技术与管理并重</strong>：技术创新与管理变革相结合，才能真正发挥预测模型的价值</li>
            </ol>
        </div>

        <p>通过转炉终点预测系统的成功实施，验证了工业预测模型在冶金行业的实际应用价值。这种方法同样适用于炼铁、轧钢等其他冶金工序，以及有色金属、建材等相关行业，具有广阔的推广前景。</p>
    </div>

    <div class="back-to-top">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8 3L14 9L12.6 10.4L9 6.8L9 13L7 13L7 6.8L3.4 10.4L2 9L8 3Z" fill="white"/>
        </svg>
    </div>

    <script src="js.js"></script>
</body>
</html>
